<template>
  <div class="data-of-competing-products">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户管理" name="first">
        <el-row :gutter="0">
          <el-col :span="4" class="title-col">公司名称</el-col>
          <el-col :span="2" class="title-col">行业</el-col>
          <el-col :span="2" class="title-col">地点</el-col>
          <el-col :span="2" class="title-col">获投状态</el-col>
          <el-col :span="2" class="title-col">成立时间</el-col>
          <el-col :span="12" class="title-col">一句话介绍</el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="4">{{ '公司名称' || '/' }}</el-col>
          <el-col :span="2">{{ '行业' || '/' }}</el-col>
          <el-col :span="2">{{ '地点' || '/' }}</el-col>
          <el-col :span="2">{{ '获投状态' || '/' }}</el-col>
          <el-col :span="2">{{ '成立时间' || '/' }}</el-col>
          <el-col :span="12">{{ '一句话介绍' || '/' }}</el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "DataOfCompetingProducts",
  data() {
    return {
      activeName: 'first'
    }
  }
}
</script>

<style lang="scss">
.data-of-competing-products {
  .el-tabs__nav, .el-tabs__header {
    border: none !important;
    margin-bottom: 0;
  }
  .el-tabs__item {
    background: #F9FAFC;
    margin-right: 2px;
    border: solid 1px #D0D4DE;
    border-bottom: none;
    border-radius: 2px 2px 0px 0px;
    &:first-child {
      border-left: solid 1px #D0D4DE !important;
    }
    &.is-active {
      background: none;
      border-color: #D0D4DE;
    }
  }
  .el-row {
    min-height: 40px;
    height: auto;
    border-top: solid 1px #dbedfc;
    &.lg-row {
      .el-col {
        min-height: 79px;
      }
    }
    .title-col {
      height: 100%;
      background-color: #eef6fd;
    }
    .center-col {
      justify-content: center;
    }
    .el-col {
      height: 100%;
      min-height: 40px;
      padding: 5px 20px;
      border-left: solid 1px #DCEDFC;
      font-size: 14px;
      color: #242424;
      display: flex;
      align-items: center;
      line-height: 20px;
      &:last-child {
        border-right: solid 1px #DCEDFC;
      }
    }
    &:last-child {
      border-bottom: solid 1px #DCEDFC;
    }
  }
}
</style>
